<template>
<div>
	<!--头部-->
	<div class="shang-top">
		<a href="#/"><img class="shang-jian" src="../assets/img/duanhuowang/zuo.png" alt=""/></a>
		<span class="shangpin">商品详情</span>
		<span class="shang-rimg">
			<img class="shang-gou" src="../assets/img/shouye/meishi/baigou.png" alt=""/>
			<img class="shang-ff" src="../assets/img/duanhuowang/fan.png" alt=""/>
			<img class="shang-shou" src="../assets/img/shouye/pinpai/xiaoshouye.png" alt=""/>
		</span>
	</div>
	<!--宝贝即将售罄，再不抢就没了哦~-->
	<p id="duan" class="tixing">宝贝即将售罄，再不抢就没了哦~</p>
	<!--面包-->
	<div v-for="ii in 50" class="mianbao">
		<!---->
		<img class="lbaoy" src="../assets/img/shouye/xianshi/xian5.png" alt=""/>
		<!---->
		<div class="rbaoy">
			<p class="shousi">手撕面包105g</p>
			<p class="kougan">口感一流  营养又美味</p>
			<p class="rjia">￥29.9</p>
		</div>
		<div class="mas">
			<p class="bma"><span>马上抢</span><img src="../assets/img/shouye/xiaoxi/youjian.png" alt=""/></p>
			<p class="hshe">还剩<span>01：59：59</span></p>
		</div>
	</div>
	<!--分享-->
	<div class="fenx">
		<!--蒙版-->
		<div class="meng"></div>
		<!--空间-->
		<div class="fentu">
			<div class="xfen">
				<img src="../assets/img/shouye/xianshi/xian4.png" alt=""/>
				<p>微信朋友圈</p>
			</div>
			<div class="xfen">
				<img src="../assets/img/shouye/xianshi/xian7.png" alt=""/>
				<p>微信好友</p>
			</div>
			<div class="xfen">
				<img src="../assets/img/shouye/xianshi/xian1.png" alt=""/>
				<p>QQ好友</p>
			</div>
			<div class="xfen">
				<img src="../assets/img/shouye/xianshi/xian2.png" alt=""/>
				<p>QQ空间</p>
			</div>
			<div class="xfen">
				<img src="../assets/img/shouye/xianshi/xian6.png" alt=""/>
				<p>微博</p>
			</div>
			<div class="xfen">
				<img src="../assets/img/shouye/xianshi/xian3.png" alt=""/>
				<p>复制链接</p>
			</div>
			<span class="qux">取消</span>
		</div>
	</div>
	<!--点击回到顶部-->
		<a href="#duan">
			<div class="duanh">
			<img src="../assets/img/shouye/pinpai/dingbu.png" alt=""/>
			<p class="duanding">返回顶部</p>
			</div>
		</a>
</div>
</template>

<script>
	export default{
		methods:{
			mban:function(){
				$(".shang-ff").click(function(){
					$(".fenx").css("display","block");
				});
			},
			qux:function(){
				$(".qux").click(function(){
					$(".fenx").css("display","none");
				});
			}
		},
		mounted:function(){
			this.mban();
			this.qux();
		}
	}
</script>

<style>
	/*返回顶部*/
	.duanh{
		position: fixed;
		right:0.4rem;
		bottom: 17.5rem;
	}
	.duanh>img{
		width: 4.8rem;
		height: 4.8rem;
		margin-left: 8.2rem;
	}
	.duanding{
		font-size: 2.4rem;
		color:red;
		text-align: right;
		font-weight: 150;
		padding-top: 1rem;
	}
	/*头部*/
	.shang-top {
		position: fixed;
		top: 0;
		left: 0;
		background: #e53e42;
		width: 100%;
		height: 9.6rem;
		display: flex;
		justify-content: space-around;
		align-items: center;
		z-index: 5;
	}
	.shangpin {
		color: white;
		font-size: 3.6rem;
		text-align: center;
		padding: 0 10rem 0 20rem;
		font-weight: 200;
	}

	.shang-jian {
		width: 2.3rem;
		height: 3.8rem;
	}
	.shang-gou,.shang-ff {
		width: 3.6rem;
		height: 3.4rem;
	}
	.shang-ff{
		padding:0 2rem;
	}
	.shang-shou{
		width: 3.6rem;
		height: 3.6rem;
	}
	/*宝贝即将售罄，再不抢就没了哦~*/
	.tixing{
		width: 100%;
		height: 8rem;
		line-height: 8rem;
		padding-left: 2rem;
		font-size: 3rem;
		color:#4d4d4d;
		margin-top: 9.6rem;
	}
	.mianbao{
		height: 16rem;
		border-bottom: 0.1rem solid #CCCCCC;
		padding:2rem;
		background: #FFFFFF;
		overflow: hidden;
	}
	.lbaoy{
		width: 18rem;
		height: 16rem;
		padding-right: 2rem;
		float:left;
	}
	.rbaoy{
		display: inline-block;
		color:#333333;
	}
	.shousi{
		font-size: 3rem;
	}
	.kougan{
		font-size: 2.4rem;
		color:#4D4D4D;
		padding:1rem 0;
	}
	.rjia{
		color:#FF0000;
		font-size: 2.8rem;
	}
	.mas{
		float: right;
		padding-top: 10rem;
	}
	.bma{
		width: 12rem;
		height: 4rem;
		background: #F8545F;
		border-radius: 3rem;
		font-size: 1.8rem;
		color:#FFFFFF;
		text-align: center;
		line-height: 4rem;
	}
	.bma>img{
		width: 1.1rem;
		padding-left: 2rem;
		margin-top: -3rem 0;
	}
	.hshe{
		font-size: 1.6rem;
	}
	.hshe>span{
		color:#F8545F;
	}
	/*分享*/
	.fenx{
		width: 100%;
		height: 100%;
		position: fixed;
		top:0;
		z-index: 100;
		display: none;
	}
	.meng{
		height: 83rem;
		width: 100%;
		background:rgba(0,0,0,0.5);
	}
	.fentu{
		height: 45rem;
		background:#FFFFFF;
		overflow: hidden;
	}
	.xfen{
		width: 15rem;
		text-align: center;
		float:left;
		padding:0 3rem;
		margin:4rem 0rem 2rem 1.5rem;
		
	}
	.xfen>img{
		width: 6.4rem;
		height: 6.4rem;
	}
	.xfen>p{
		font-size: 2.4rem;
	}
	.qux{
		font-size: 2.4rem;
		width: 17rem;
		height: 5rem;
		background: #F8545F;
		border-radius: 0.5rem;
		float: left;
		text-align: center;
		color:#FFFFFF;
		line-height: 5rem;
		margin-left: 26rem;
	}
</style>